import 'package:flutter/material.dart';
import 'package:flutter_ohos/pages/home/index.dart';

class TabsCase extends StatefulWidget {
  const TabsCase({Key? key}) : super(key: key);

  @override
  _TabsCaseState createState() => _TabsCaseState();
}

class _TabsCaseState extends State<TabsCase> {
  // 定义tabList数据
  List tabList = [
    {
      'label': '首页',
      'activeIcon': '/tabbar/home-active.png',
      'icon': '/tabbar/home.png',
    },
    {
      'label': '分类',
      'activeIcon': '/tabbar/cate-active.png',
      'icon': '/tabbar/cate.png',
    },
    {
      'label': '购物车',
      'activeIcon': '/tabbar/cart-active.png',
      'icon': '/tabbar/cart.png',
    },
    {
      'label': '我的',
      'activeIcon': '/tabbar/user-active.png',
      'icon': '/tabbar/user.png',
    }
  ];

  List<BottomNavigationBarItem> getTabBarList() {
    List<BottomNavigationBarItem> list = [];
    for (var i = 0; i < tabList.length; i++) {
      list.add(BottomNavigationBarItem(
          label: tabList[i]["label"],
          icon: Image.asset(
            tabList[i]["icon"],
            width: 40,
            height: 40,
          ),
          activeIcon: Image.asset(
            tabList[i]["activeIcon"],
            width: 40,
            height: 40,
          )));
    }
    return list;
  }

  int currentIndex = 0; // 激活选项索引

  // 根据鸿蒙推理的方案
  Widget getBody() {
    if (currentIndex == 0) {
      return Center(child: Text("首页"));
    } else if (currentIndex == 1) {
      return Center(child: Text("分类"));
    } else if (currentIndex == 2) {
      return Center(child: Text("购物车"));
    } else {
      return Center(child: Text("我的"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            "Flutter的Tabs案例",
          ),
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white),
      // body: getBody(),
      body: IndexedStack(
        index: currentIndex,
        children: const [
          HomePage(),
          Center(child: Text("分类")),
          Center(child: Text("购物车")),
          Center(child: Text("我的")),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: getTabBarList(),
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.black,
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}
